<template>
  <page-wrap hide-tab back title="咨询记录" class="page" stayStill>
    <view class="container"> </view>
    <view class="tab">
      <u-tabs-swiper
        ref="tabs"
        :list="tabs"
        :is-scroll="false"
        :current="current"
        :active-color="activeColor"
        :inactive-color="inactiveColor"
        font-size="28"
        height="104"
        bar-width="56"
        bar-height="14"
        :bar-style="barStyleObj"
        @change="handleTab"
      ></u-tabs-swiper>
    </view>
    <swiper
      class="swiper-box"
      :style="
        'height: calc(100vh - ' +
        navHeight +
        'px - 162rpx - env(safe-area-inset-bottom));'
      "
      :duration="400"
      :current="swiperCurrent"
      @transition="handleTransition"
      @animationfinish="handleAnimation"
    >
      <block v-for="(item, index) in list" :key="index">
        <swiper-item>
          <scroll-view scroll-y class="scroll-views" @scrolltolower="loadMore">
            <ConsultRecordList
              :list="item.list"
              :status="item.loading"
              :type="swiperCurrent"
              :show-empty="item.showEmpty"
              @item-click="handleNoticeItem"
            ></ConsultRecordList>
          </scroll-view>
        </swiper-item>
      </block>
    </swiper>
  </page-wrap>
</template>

<script>
import ConsultRecordList from "./components/ConsultRecordList";
import { serviceRecordPage } from "@/api/modules/career";

export default {
  components: { ConsultRecordList },
  data() {
    return {
      activeColor: "#333333",
      inactiveColor: "#666666",
      navHeight: 0,
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      companyId: uni.getStorageSync("company-id"),
      isCompany: uni.getStorageSync("login-status") == "company",
      current: 0,
      swiperCurrent: 0,
      emptyShow: true,
      tabs: [
        {
          name: "在线咨询",
        },
        {
          name: "电话咨询",
        },
        {
          name: "简历分析",
        },
        {
          name: "竞争力分析",
        },
      ],
      list: [
        {
          type: "onlineConsult",
          page: 0,
          list: [],
          loading: "loadmore",
          showEmpty: false,
        },
        {
          type: "phoneConsult",
          page: 0,
          list: [],
          loading: "loadmore",
          showEmpty: false,
        },
        {
          type: "resumeAnalysis",
          page: 0,
          list: [],
          loading: "loadmore",
          showEmpty: false,
        },
        {
          type: "competitivenessAnalysis",
          page: 0,
          list: [],
          loading: "loadmore",
          showEmpty: false,
        },
      ],
      barStyleObj: {
        bottom: "16rpx",
        backgroundColor: "transparent",
        backgroundImage: `url(${this.$imgBaseSelf}/select.png)`,
        backgroundSize: "100% 100%",
        borderRadius: "0",
      },
      init: false,
      from: "userCenter",
    };
  },
  onLoad(opt) {
    this.from = opt.from || "userCenter";
  },
  created() {
    // #ifdef MP-WEIXIN
    this.navHeight = getApp().globalData.navHeight;
    // #endif
  },
  mounted() {},
  onShow() {
    this.getData(true);
  },
  methods: {
    getData(init) {
      let currentSelectItem = this.list[this.swiperCurrent];
      if (init) {
        currentSelectItem.list = [];
        currentSelectItem.page = 0;
        currentSelectItem.loading = "loadmore";
      }
      let loading = currentSelectItem.loading;
      let page = currentSelectItem.page;
      if (loading == "loading" || loading == "nomore") return;
      this.$set(currentSelectItem, "loading", "loading");
      let params = {
        personId: parseInt(this.personId),
        pageNo: page + 1,
        pageSize: 20,
        serviceType: this.swiperCurrent + 1,
        personType: 1,
      };
      serviceRecordPage(params).then((res) => {
        if (res.data) {
          let list = currentSelectItem.list;
          list.push(...res.data);
          this.$set(currentSelectItem, "list", list);
          this.$set(currentSelectItem, "loading", "loadmore");
          if (list.length >= res.pageparam.sums) {
            this.$set(currentSelectItem, "loading", "nomore");
            return;
          }
        } else {
          this.$set(currentSelectItem, "loading", "nomore");
          this.$set(currentSelectItem, "showEmpty", true);
        }
      });
    },
    handleTab(index) {
      this.swiperCurrent = index;
    },
    handleTransition(e) {
      let dx = e.detail.dx;
      this.$refs.tabs.setDx(dx);
    },
    handleAnimation(e) {
      let current = e.detail.current;
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
      if (!this.list[this.swiperCurrent].list.length) {
        this.getData();
      }
    },
    handleNoticeItem(item, index) {
      console.log(item, index);
      uni.navigateTo({
        url: "/pagesSub/public/interview/index?id=" + item.pmail_id,
      });
    },
    loadMore() {
      this.list[this.swiperCurrent].page += 1;
      this.getData();
    },
  },
};
</script>

<style lang="scss">
.page {
  display: flex;
  flex-direction: column;
  .tab {
    border-bottom: 1px solid #ececec;
  }

  .swiper-box {
    display: flex;
    flex-direction: column;
    ::v-deep .uni-swiper-wrapper,
    ::v-deep swiper-item {
      flex: 1;
      height: 1rpx;
    }
    ::v-deep .u-empty {
      position: absolute;
      left: 50%;
      top: 48%;
      transform: translate(-50%, -50%);
    }
  }

  .scroll-views {
    height: 100%;
  }
  .operate-bar {
    display: flex;
    justify-content: space-around;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .save-btn {
      flex-shrink: 0;
      margin: 82rpx 0 4rpx;
      width: 90%;
    }
  }
}
</style>
